<template>
<!--分组管理-->
    <div>
        <div class="block">
            <el-row>
               
                 <el-col :span="8">
                    <el-input placeholder="客服分组名称" style="width:70%" id="sck" v-model="search">
                    <el-button  slot="append"  id="search" @click="searchsj">搜索</el-button >
                    </el-input>
                </el-col>
                 <el-col :span="5" style="float:right">
                    <el-button type="primary" @click="dialogaddgroup = true">创建分组</el-button>


                        <el-dialog
                            title="创建分组"
                            :visible.sync="dialogaddgroup"
                            width="500px"
                                    align="left"
                                >
                            <el-form :model="addgroup" :rules="addrules" ref="add_group">
                                <el-form-item label="组名" prop="g_name">
                                    <el-input type="text" v-model="addgroup.g_name" autocomplete="off"></el-input>
                                </el-form-item>
                            
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogaddgroup = false">取 消</el-button>
                            <el-button type="primary" @click="addgroupsj('add_group')">确 定</el-button
                            >
                            </div>
                        </el-dialog>

                      <el-button style="margin-left:10px;">导出当前数据</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px">
                <el-table
                    ref="multipleTable"
                    :header-cell-style="{background:'#e5f1ff',color:'#606266'}"
                    :data="setupGroupData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    tooltip-effect="dark"
                    style="width: 100%" >
                    <el-table-column
                    prop="g_name"
                    label="分组名称"
                   
                    align="center">
                    </el-table-column>

                    <el-table-column
                    prop="number"
                    label="组内人数"
                    width="300"
                     align="center">
                    </el-table-column>
                     <el-table-column
                    prop="c_time"
                    label="创建时间"
                     width="400" 
                     align="center">
                    </el-table-column>
                     <el-table-column
                    prop="chaoz"
                    label="操作"
                     width="150" 
                     align="center">

                        <template  slot-scope="scope">
                            <el-button type="text" size="small" @click="updateid(scope.$index)">编辑</el-button>
                            <el-button type="text" size="small" @click="deleteid(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div>
                      <el-dialog
                                    title="删除确认"
                                    :visible.sync="dialogdeletegroup"
                                    width="500px"
                                >
                                    <el-form>
                                    <el-form-item style="margin: 0px">
                                        <label> 确定删除此信息吗？</label>
                                    </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogdeletegroup = false">取 消</el-button>
                                    <el-button type="primary" @click="deletegroup()">确 定</el-button
                                    >
                                    </div>
                                </el-dialog>


                                 <el-dialog
                            title="修改分组"
                            :visible.sync="dialogupdategroup"
                            width="500px"
                                    align="left"
                                >
                            <el-form :model="setupGroupUpdate" :rules="updaterules" ref="update_group">
                                <el-form-item label="组名" prop="g_name">
                                    <el-input type="text" v-model="setupGroupUpdate.g_name" autocomplete="off"></el-input>
                                </el-form-item>
                            
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogupdategroup = false">取 消</el-button>
                            <el-button type="primary" @click="updategroupsj('update_group')">确 定</el-button
                            >
                            </div>
                        </el-dialog>

                </div>
            </el-row>
            <el-row style="margin-top:20px">
                    <div class="block">
                       <el-button style="float:right;margin-left:20px" size="small">确定</el-button>
                        <el-pagination 
                         @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            style="float: right"
                            background
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :current-page="currentPage"
                        :total="setupGroupData.length">
                        </el-pagination>
                      
                       
                    </div>
            </el-row>
       
        </div>
    </div>
</template>
<style scoped>

#search {
padding: 11px;
  background-color: #0170f3;
  border-radius: 0%;
  color: #ffffff;
 
} 
.el-button{
    padding: 12px 12px;
    border-radius: 0px;
}


</style>
<script>
import {mapState} from 'vuex'
export default {
    
    name:"GroupManagement",
    data(){
        return{
            status:"1",
            //添加框
            dialogaddgroup:false,
            //删除框
            dialogdeletegroup:false,
            //修改框
            dialogupdategroup:false,
            //删除取到的id
            deletegroupid:"",
            //修改取到的id
            updategroupid:"",
             //翻页一页显示多少数据设置的默认值
            pageSize:10,
            //现在是第几页刚开始显示的默认值
            currentPage:1,
            //搜索的
            search:"",
            addgroup:{
                g_name:""
            },
            addrules:{
                g_name:[
                     { required: true, message: '请输入创建的组名', trigger: 'blur' }
                ]

            },
            updaterules:{
                g_name:[
                     { required: true, message: '请输入创建的组名', trigger: 'blur' }
                ]

            }
        }
    },
      computed:{
        ...mapState("SetupModule",["setupGroupData","setupGroupUpdate"])
    },
    mounted(){
        this.$store.dispatch("SetupModule/groupall",{status:this.status})
    },
    methods:{
        addgroupsj(formName){
              this.$refs[formName].validate((valid) => {
                if (valid) {
                
                this.$store.dispatch("SetupModule/groupadd", this.addgroup)
                this.dialogaddgroup = false; //关闭弹出框
                } else {
                    this.$message({
                        showClose: true,
                        message: '请把内容完善',
                        type: 'error'
                    });
                }
            });
        },
        //删除
        deleteid(i){
            this.dialogdeletegroup = true;
            this.deletegroupid = i
        },
        deletegroup(){
            this.$store.dispatch("SetupModule/groupdelete", this.deletegroupid)
            this.dialogdeletegroup = false
        },

        //修改
        updateid(i){
                this.dialogupdategroup = true;
             
                this.$store.commit("SetupModule/updategroup",i)
        },
        updategroupsj(formName){

             this.$refs[formName].validate((valid) => {
                if (valid) {
                
                this.$store.dispatch('SetupModule/groupupdate',this.setupGroupUpdate)
                this.dialogupdategroup = false
                } else {
                    this.$message({
                        showClose: true,
                        message: '请把内容完善',
                        type: 'error'
                    });
                }
            });
            
        },
        searchsj(){
            
             this.$store.dispatch("SetupModule/searchgroup",this.search)
        },
          //翻页器
        //这是修改当前页面显示多少条数据
        handleSizeChange: function (size) {
            this.pageSize = size;
            console.log("这是上面的"+this.pageSize);
        },
        //这是点击多少页时发生的
        handleCurrentChange: function(currentPage){
            this.currentPage = currentPage;
            console.log("这是下面的"+this.currentPage);
        }
    },
      watch:{
        search:function(){  
            if(this.search === ""){
                this.$store.dispatch("SetupModule/groupall",{status:this.status})
            }
        }
    }
}
</script>